<template>
	<view>
		<view v-if="type == 1" class="payBOx">
			<view class="payTop">
				<img alt="" class="payImg"
					src="https://hzdaoziji.oss-cn-hangzhou.aliyuncs.com/file177f2a286d9441699dbd919864c5cd2b.png">
				<view class="payTitle">
					支付成功
				</view>
			</view>
			<view class="payText">
				可在个人中心-订场列表中管理您的行程
			</view>
			<view class="payBotton" style="background: #f59a23;"
				@click="toUrl(1,'/subpackageOne/venueRelated/BookingVenue/BookingVenue')">
				订场列表
			</view>
			<view class="payBotton" @click="toUrl(2,'/pages/home/index')">
				返回首页
			</view>
		</view>
		<view v-if="type == 2" class="payBOx">
			<view class="payTop">
				<img alt="" class="payImg"
					src="https://hzdaoziji.oss-cn-hangzhou.aliyuncs.com/file2d8d9574d7c544b2867ab65d7f1cf490.png">
				<view class="payTitle">
					取消支付
				</view>
			</view>
			<view class="payText">
				可在订单列表继续完成支付
			</view>
			<view class="payBotton" style="background: #f59a23;"
				@click="toUrl(1,'/subpackageOne/venueRelated/BookingVenue/BookingVenue')">
				订单列表
			</view>
			<view class="payBotton" @click="toUrl(2,'/pages/home/index')">
				返回首页
			</view>
		</view>

		<view class="curriculumBox">
			培训课程
		</view>
		<view v-for="(item,index) in classList" :key="index" class="">
			<view class="classItem" @click="classClick(item.id)">
				<image :src="item.courseCover" class="itemImg" mode=""></image>
				<view class="itemRight">
					<view class="itemName">
						{{ item.courseName }}
					</view>
					<view class="itemPriceRange">
						<view style="color: red;">
							￥
						</view>
						<view class="">
							{{ item.priceRange }}起
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="moreBox" @click="moreClick">
			<view class="">
				更多课程
			</view>
			<u-icon color="#169bd5" name="arrow-right-double"></u-icon>
		</view>
	</view>
</template>

<script>
	import {

		queryCourseList
	} from "@/api/challenge";

	export default {
		data() {
			return {
				type: 1,
				classList: [],
				id: 0
			}
		},
		onLoad(data) {
			this.id = data.id
			this.type = data.type
			queryCourseList(data.id, 1, 3).then(res => {
				console.log('课程', res);
				this.classList = res.records
			})
		},
		methods: {
			toUrl(data, url) {
				if (data == 2) {
					uni.switchTab({
						url
					});
				} else {
					uni.navigateTo({
						url
					})
				}

			},
			classClick(item) {
				uni.navigateTo({
					url: '/subpackageOne/venueRelated/curriculumDetails/curriculumDetails?id=' + item
				})
			},
			moreClick() {
				uni.navigateTo({
					url: '/subpackageOne/venueRelated/curriculumList/curriculumList?id=' + this.id
				})
			},

		}
	}
</script>

<style lang="scss" scoped>
	.payBOx {
		width: 400rpx;
		margin: auto;

		.payTop {
			margin-top: 20px;
			display: flex;
			justify-content: center;

			.payImg {
				width: 90rpx;
				height: 90rpx;
			}

			.payTitle {
				font-size: 60rpx;
				font-weight: 600;
				margin-left: 30rpx;
			}
		}

		.payText {
			font-size: 34rpx;
			font-weight: 600;
			margin: 20rpx 0;
		}

		.payBotton {
			margin: 40rpx 0;
			padding: 20rpx 0;
			border-radius: 16rpx;
			text-align: center;
			color: #fff;
			background-color: #169bd5;
		}
	}

	.curriculumBox {
		font-size: 40rpx;
		font-weight: 600;
		text-align: center;
		padding-top: 40rpx;
	}

	.classItem {
		display: flex;
		padding: 20rpx;

		.itemImg {
			width: 160rpx;
			height: 160rpx;
		}

		.itemRight {
			margin-left: 20rpx;

			.itemName {
				font-weight: 700;
			}

			.itemPriceRange {
				display: flex;
				margin-top: 50rpx;
			}
		}
	}

	.moreBox {
		display: flex;
		justify-content: center;
		color: #169bd5;
		padding: 20rpx 0;
	}
</style>